import React, { useState, useEffect, useRef } from "react";
import { useNavigate, useNavigation } from "react-router-dom";
import { useAppDispatch } from "../../../../utils/store/hooks";
import { accessApi } from "../../../../utils/backend/server";
import { toast } from "../../../../components/Toast/Toast";
import styles from "./Tools.module.css";
interface ContextMenuPosition {
  x: number;
  y: number;
}
interface ShortcutItem {
  id: string;
  icon: string;
  title: string;
  onClick?: () => void;
}

export default () => {
  const [contextMenuPos, setContextMenuPos] =
    useState<ContextMenuPosition | null>(null);
  const desktopRef = useRef<HTMLDivElement>(null);
  const to = useNavigate();
  const dispatch = useAppDispatch();

  const shortcuts: ShortcutItem[] = [
    {
      id: "1",
      icon: "/tools_icon/2.png",
      title: "Refresh IP",
      onClick: async () => {
        // to("/")
        toast("start refreshing....");
        const res = await accessApi.refreshIp();
        toast(res.msg);
      },
    },
    {
      id: "2",
      icon: "/tools_icon/1.png",
      title: "qrCode",
      onClick: async () => {
        to("/qrCode");
      },
    },
    {
      id: "3",
      icon: "/tools_icon/3.png",
      title: "Doodle",
      onClick: () => {
        to("/doodle");
      },
    },
    {
      id: "4",
      icon: "/tools_icon/4.png",
      title: "Eval",
      onClick: () => {
        to("/eval");
      },
    },
    {
      id: "5",
      icon: "/tools_icon/5.png",
      title: "Commands",
      onClick: () => {
        to("/commands");
      },
    },
    {
      id: "6",
      icon: "/tools_icon/6.png",
      title: "History",
      onClick: () => {
        to("/history");
      },
    },
    {
      id: "7",
      icon: "/tools_icon/7.png",
      title: "Engine",
      onClick: () => {
        to("/engine");
      },
    },
    // { id: "4", icon: "fa-envelope", title: "邮件系统" },
    // { id: "5", icon: "fa-users", title: "团队协作" },
    // { id: "6", icon: "fa-cog", title: "系统设置" },
    // { id: "7", icon: "fa-folder", title: "文件管理" },
    // { id: "8", icon: "fa-tasks", title: "任务列表" },
    // { id: "9", icon: "fa-comments", title: "即时通讯" },
    // { id: "10", icon: "fa-cloud", title: "云存储" },
    // { id: "11", icon: "fa-shield-alt", title: "安全中心" },
    // { id: "12", icon: "fa-book", title: "知识库" },
  ];
  useEffect(() => {
    const handleClickOutside = () => {
      setContextMenuPos(null);
    };
    document.addEventListener("click", handleClickOutside);
    return () => {
      document.removeEventListener("click", handleClickOutside);
    };
  }, []);
  const handleContextMenu = (e: React.MouseEvent) => {
    e.preventDefault();
    if ((e.target as HTMLElement).closest("[draggable]")) {
      setContextMenuPos({
        x: e.pageX,
        y: e.pageY,
      });
    }
  };
  return (
    <div className={styles.container}>
      <div className={styles.entryBox}>
        <div ref={desktopRef} className={styles.desktopRef}>
          {shortcuts.map((item) => (
            <div
              key={item.id}
              className={styles.shortcutCard}
              draggable
              onClick={item.onClick}
              onContextMenu={handleContextMenu}
            >
              <div className={styles.top}>
                {/* <i className={styles.icon}></i> */}
                <img src={item.icon} alt="" className={styles.icon} />
              </div>
              <span className={styles.title}>{item.title}</span>
            </div>
          ))}
        </div>
      </div>
      {contextMenuPos && (
        <div
          className={styles.contextMenu}
          style={{
            left: contextMenuPos.x,
            top: contextMenuPos.y,
          }}
        >
          <div style={{ padding: "8px 0" }}>
            <a href="javascript: void(0)" className={styles.menuItem}>
              打开
            </a>
            <a href="javascript: void(0)" className={styles.menuItem}>
              重命名
            </a>
            <a href="javascript: void(0)" className={styles.menuItem}>
              删除
            </a>
            <a href="javascript: void(0)" className={styles.menuItem}>
              属性
            </a>
          </div>
        </div>
      )}
    </div>
  );
};
